<template>
    <div class="comp" ref="add"> <!-- 放置图表的位置 --></div>
</template>

<script  setup>
// 引入基础模块
import { escapeHtmlComment } from '@vue/shared';
import { ref, inject, onMounted, onBeforeUnmount } from 'vue'

const echarts = inject('echarts')
const api = inject('api')
// 初始化数据
let add = ref(null)
let ying = null
let allData=[]

function add1() {
    ying = echarts.init(add.value, 'pink')
    let init1 = {
        title: {
            txte: "你好333333333"
        },
        xAxis: {
            type: "value"
        },
        yAxis:{
            type:'category'
        },
        series:[
            {
                type:'bar'
            }
        ]
    }
    ying.setOption(init1)
}
async function add2(){
    let {data} = await api('plantingAreaTop')
    allData=data
    console.log(allData);
    add3()
}
function add3(){
    let add4 ={
        yAxis:{
            data:allData.map(item=>item.name)
        },
        series:[
            {
                data:allData.map(item=>item.area)
                // data: ['北京', '上海', '辽宁', '台湾']
            }

        ]
    }
    ying.setOption(add4)
}
onMounted(() => {
    add1()
    add2()
})
</script>

<style scoped></style>